<!DOCTYPE html>
<meta charset="utF-8">
<form action="#" method="post">

    <!--邮件表单-->
    邮箱:<input type="email" name="myemail" value="" /><br>
    <!--url表单-->
    网址:<input type="url" name="myurl" value="" /><br>
    <!--数值表单-->
    数值:<input type="number" name="age" value="" /><br>
    <!--滑块表单-->
    滑块:<input type="range" id="range" name="fen" max="100" value="0" /><span>0</span>
        <script>
            var range=document.getElementById('range');
            var flag=false;
            range.onmousedown=function(){
                flag=true;
            }
            range.onmouseup=function(){
                flag=false;
            }
            range.onmousemove=function(){
                if(flag){
                    
                    this.nextSibling.innerHTML=this.value;
                }
            }
        </script>
    <br>
    <!--滑块表单-->
    滑块:<input type="range" id="range" name="fen1" max="100" value="0" />
         <!--仅opear浏览器有效-->
         <output onforminput="value=fen1.value" >0</output> 
         <br>
    <!--搜索表单-->
    搜索:<input type="search" name="keywords" value="" results="n" /><br>
    <!--颜色表单-->
    颜色:<input type="color" name="face" value="" /><br>
    <!--电话表单-->
    电话:<input type="tel" name="myphone" value="" /><br>
    <!--日期表单-->
    日期:<input type="date" name="date" value="" /><br>
    <!--时间表单-->
    时间:<input type="time" name="time" value="" /><br>
    <!--周表单-->
    周选取:<input type="week" name="week" value="" /><br>
    <!--月表单-->
    月选取:<input type="month" name="month" value="" /><br>
    <!--完整时间表单--> 
    完整时间:<input type="datetime" name="datetime" value="" /><br>
    <button type="submit">提交</button>
   

</form>